<template>
	<view class="ikz-bid">
    <ikz-loading  :css-data="loading_css"></ikz-loading>
    <!-- list -->
    <ikz-topbg></ikz-topbg>
    <view class="ikz-orderdetail">
      <view class="ikz-tipss">
        <view class="ikz-tips-title" v-if="show_info.status == 0">
          待支付
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 1">
          待接单
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 2">
          待完成
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 3">
          已完成
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 7">
          已送达
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 4">
          已取消
        </view>
       <view class="ikz-tips-desc" v-if="show_info.status == 1||show_info.status == 0">
          订单超过一小时将自动取消
        </view>
      </view>
      <view class="ikz-orderdetail-top">
        <view class="ikz-orderdetail-top-code">
          <view class="ikz-orderdetail-top-num">
            订单编号：{{show_info.order_no}}
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 0">
            待支付
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 1">
            待接单
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 2">
            待完成
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 3">
            已完成
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 7">
            已送达
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 4">
            已取消
          </view>
        </view>
        <view class="ikz-orderdetail-list-item">
          <view class="ikz-orderdetail-list-top">
            <view class="ikz-orderdetail-list-head">
              <image class="ikz-orderdetail-list-img" :src="show_info.avatar"></image>
            </view>
            <view class="ikz-orderdetail-list-head-right">
              <view class="ikz-orderdetail-list-head-right-box">
                <view class="ikz-orderdetail-list-head-name">
                  {{show_info.nickname}}
                </view>
                <view class="ikz-orderdetail-list-head-time">
                  {{show_info.createtime}}
                </view>
              </view>
              <view class="ikz-orderdetail-list-head-right-box">
                <view class="ikz-orderdetail-list-head-card">
                  {{show_info.type_text}}
                </view>
                <view class="ikz-orderdetail-list-head-price">
                  ￥{{show_info.total_fee}}
                </view>
              </view>
            </view>
          </view>
          <view class="ikz-orderdetail-list-content">
            {{show_info.information}}
          </view>
        </view>
      </view>
      <view class="ikz-receive-box" v-if="show_info.receive.nickname">
        <view class="ikz-receive-box-top">
          <view class="ikz-receive-title">
            <image class="ikz-receive-img" src="/static/campus/receive.png"></image>
            接单员
          </view>
          <view class="ikz-receive-user">
            <image class="ikz-receive-user-img" :src="show_info.receive.avatar"></image>
            <view class="ikz-receive-user-name">
              {{show_info.receive.nickname}}
            </view>
          </view>
        </view>
        
        <view class="ikz-detail-phone" @click="getPhone(show_info.receive.mobile)" v-if="show_info.status != 3">
          <image src="/static/phone.png" class="ikz-detail-phone-img"></image>
          拨打电话
        </view>
      </view>
      <view class="ikz-orderdetail-other">
        <view class="ikz-orderdetail-other-title" v-if="show_info.down_url">
          <view class="ikz-orderdetail-other-top">
             <view class="ikz-sticky-spot2"></view>
            <view class="ikz-orderdetail-other-top-title">
              下载链接
            </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{show_info.down_url}}
          </view>
        </view>
        <view class="ikz-orderdetail-other-title" v-if="show_info.receive_email">
          <view class="ikz-orderdetail-other-top">
             <view class="ikz-sticky-spot1"></view>
            <view class="ikz-orderdetail-other-top-title">
              收货邮箱
            </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{show_info.receive_email}}
          </view>
        </view>
        <view class="ikz-orderdetail-other-title" v-if="show_info.receive_limit">
          <view class="ikz-orderdetail-other-top">
             <view class="ikz-sticky-spot2"></view>
            <view class="ikz-orderdetail-other-top-title">
              接单限制
            </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{show_info.receive_limit}}
          </view>
        </view>
        <view class="ikz-orderdetail-other-title" v-if="show_info.game_time">
          <view class="ikz-orderdetail-other-top">
             <view class="ikz-sticky-spot1"></view>
            <view class="ikz-orderdetail-other-top-title">
              游戏时间
            </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{show_info.game_time}}
          </view>
        </view>
        <view class="ikz-orderdetail-other-title" v-if="show_info.game_platform">
          <view class="ikz-orderdetail-other-top">
             <view class="ikz-sticky-spot"></view>
            <view class="ikz-orderdetail-other-top-title">
              游戏名称
            </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{show_info.game_platform}}
          </view>
        </view>
        
        <view class="ikz-orderdetail-other-title" v-if="show_info.start">
          <view class="ikz-orderdetail-other-top">
             <view class="ikz-sticky-spot"></view>
            <view class="ikz-orderdetail-other-top-title">
              取货地址
            </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{show_info.start}}
          </view>
        </view>
        <view class="ikz-orderdetail-other-title" v-if="show_info.destination">
          <view class="ikz-orderdetail-other-top">
             <view class="ikz-sticky-spot1"></view>
            <view class="ikz-orderdetail-other-top-title">
              收货地址
            </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{show_info.destination}}
          </view>
        </view>
        
        <view class="ikz-orderdetail-other-title" v-if="show_info.lease_duration">
          <view class="ikz-orderdetail-other-top">
             <view class="ikz-sticky-spot2"></view>
            <view class="ikz-orderdetail-other-top-title">
              租借时长
            </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{show_info.lease_duration}}
          </view>
        </view>
        <view class="ikz-orderdetail-other-title" v-if="show_info.hope_arrive">
          <view class="ikz-orderdetail-other-top">
             <view class="ikz-sticky-spot1"></view>
            <view class="ikz-orderdetail-other-top-title" v-if="show_info.type == 4">
              预计交付时间
            </view>
            <view class="ikz-orderdetail-other-top-title" v-else>
              送达时间
            </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{show_info.hope_arrive}}
          </view>
        </view>
      </view>
      
      
      <view class="ikz-take" v-for="(item,index) in show_info.express" :key="index">
        <image class="ikz-take-img" src="/static/campus/box.png"></image>
        <view class="ikz-take-center">
          <view class="ikz-take-title">
            {{item.type}}：￥{{item.price}}
          </view>
          <view class="ikz-take-tips">
            {{item.desc}}
          </view>
        </view>
        <view class="ikz-take-right">
          <view style="width: 50rpx;height: 50rpx;">
          </view>
          <view class="ikz-take-num">x{{item.number||''}}</view>
          <view style="width: 50rpx;height: 50rpx;">
          </view>
        </view>
      </view>
      <view class="ikz-tips" v-if="show_info.remarks">
        <view class="ikz-tips-item" >
          <view class="ikz-tips-help">
            <view class="ikz-tips-help-title">
              备注信息
            </view>
            <view class="ikz-tips-help-content">
              {{show_info.remarks}}
            </view>
          </view>
        </view>
      </view>
      <view class="ikz-tips" v-if="show_info.price">
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            价格
          </view>
          <view class="ikz-tips-price">
            ￥{{ show_info.price }}
          </view>
        </view>
      </view>
      <view class="ikz-tips" v-if="show_info.reward">
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title">
            赏金
          </view>
          <view class="ikz-tips-price">
            ￥{{ show_info.reward }}
          </view>
        </view>
      </view>
      <view class="ikz-tips" v-if="show_info.annex_information_images&&show_info.annex_information_images.length">
        <view class="ikz-tips-item" >
          <view class="ikz-tips-help">
            <view class="ikz-tips-help-title">
              备注信息
            </view>
            <view class="ikz-updata-bottom">
              <view class="ikz-updata-add" v-for="(item,index) in show_info.annex_information_images" :key="index">
                <image class="ikz-updata-img" mode="aspectFill" @click="showPic(show_info.annex_information_images,item)" :src="item"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="ikz-bottom" v-if="show_info.status == 0">
        <view class="ikz-help-btn"  @click="pay(show_info.id,show_info.total_fee)">去支付
        </view>
        <view class="ikz-help-btn1" @click="cancel(show_info.id)">取消订单
        </view>
      </view>
      <view class="ikz-bottom" v-if="show_info.status == 1">
        <view class="ikz-help-btn1" @click="cancel(show_info.id)">取消订单
        </view>
      </view>
      <view class="ikz-bottom" v-if="show_info.status == 7">
        <view class="ikz-help-btn2" @click="submit(show_info.id)">确认收货
        </view>
      </view>
    </view>
    <!-- list -->
	</view>
</template>

<script>
import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
import ikzOrderdetail from '@/pages/Component/Public/Orderdetail/public/orderdetail/orderdetail.vue';
import ikzTopbg from '@/pages/Component/Public/Topbg/public/topbg/topbg.vue';
var app = getApp();
import ikz from '@/pages/Common/tools.js';
export default {
	components: {
    ikzLoading,
    ikzOrderdetail,
    ikzTopbg
	},
	data() {
		return {
      id:'',
      loading_css:{
        display:'flex',
      },
      show_info:{},
      show_status:2,
    };
	},
  onLoad(options){
    this.id = options.id;
    this.detailInfo((res)=>{
      this.loading_css.display = 'none';
    });
  },
	onPullDownRefresh() {
	  this.detailInfo((res)=>{
	    uni.stopPullDownRefresh();
	  });
	},
  onShow(){
    if(this.show_status == 2){
      this.show_status = 3
    }else{
      this.detailInfo((res)=>{
        this.loading_css.display = 'none';
      });
    }
  },
	methods: {
    getPhone(phone){
      uni.makePhoneCall({
        phoneNumber: phone,
      })
    },
    showPic(urls,current){
      wx.previewImage({
        current: current, // 当前显示图片的http链接
        urls: urls // 需要预览的图片http链接列表
      })
    },
		//请求页面数据
		detailInfo(fn) {
			var path = '/xyb/order/user_detail';
			var data = {
				id:this.id
			};
			ikz.post(path, data, res => {
				if (res.data.code) {
					this.show_info = res.data.data;
          if(this.show_info.annex_information_images){
            this.show_info.annex_information_images = this.show_info.annex_information_images.split(',')
          }
				} else {
					uni.showModal({
						title: '提示',
						content: res.data.msg,
						showCancel: false,
						success: function(res) {}
					});
				}
				fn();
			});
		},
    //取消订单
		cancel(id){
		  var that = this;
		  uni.showModal({
		      title: '提示',
		      content: '确定取消订单？',
		      success: function (res) {
		          if (res.confirm) {
		            var path = '/xyb/order/cancel';
		            var data = {
		            	orderid:id
		            };
		            ikz.post(path, data, res => {
		            	if (res.data.code) {
		                uni.showToast({
		                    title: '取消成功',
		                    duration: 2000
		                });
                    setTimeout(function(){
                      uni.navigateBack({
                          delta: 1
                      });
                    },2000)
		            		that.$forceUpdate();
		            	} else {
		            		uni.showModal({
		            			title: '提示',
		            			content: res.data.msg,
		            			showCancel: false,
		            			success: function(res) {}
		            		});
		            	}
		            });
		          } else if (res.cancel) {
		              console.log('用户点击取消');
		          }
		      }
		  });
		 
		},
    submit(id){
      var that = this;
      uni.showModal({
          title: '提示',
          content: '确定货物已送达？',
          success: function (res) {
              if (res.confirm) {
                var path = '/xyb/order/confirm_complete';
                var data = {
                	orderid:id
                };
				uni.showLoading({
					title: "加载中"
				})
                ikz.post(path, data, res => {
					uni.hideLoading()
                	if (res.data.code) {
                    uni.showToast({
                        title: '确认收货成功',
                        duration: 2000
                    });
                    that.detailInfo((res)=>{
                    });
                		that.$forceUpdate();
                	} else {
                		uni.showModal({
                			title: '提示',
                			content: res.data.msg,
                			showCancel: false,
                			success: function(res) {}
                		});
                	}
                });
              } else if (res.cancel) {
                  console.log('用户点击取消');
              }
          }
      });
    },
    //去支付
		pay(id,total_fee){
		  uni.navigateTo({
		    url: '/pages/Component/Module/Payment/Program/pay/index/index?orderid=' + id +
		      '&total_price=' + total_fee
		  })
		},
    confirm(id){
      var that = this;
      uni.showModal({
          title: '提示',
          content: '确定订单已收货？',
          success: function (res) {
              if (res.confirm) {
                var path = '/xyb/order/confirm_complete';
                var data = {
                	orderid:id
                };
                ikz.post(path, data, res => {
                	if (res.data.code) {
                    uni.showToast({
                        title: '取消成功',
                        duration: 2000
                    });
                    that.show_info.status = 3;
                		that.$forceUpdate();
                	} else {
                		uni.showModal({
                			title: '提示',
                			content: res.data.msg,
                			showCancel: false,
                			success: function(res) {}
                		});
                	}
                });
              } else if (res.cancel) {
                  console.log('用户点击取消');
              }
          }
      });
    },

	}
};
</script>

<style>
  page{
    width: 100%;
    height: 100%;
    background: #F3F3F3;
  }
  .ikz-tipss {
    box-sizing: border-box;
    width: 90%;
    margin: 30rpx auto;
    border-radius: 15rpx;
  }
  
  .ikz-tips-title {
    color: #fff;
  
  }
  
  .ikz-tips-desc {
    font-size: 25rpx;
    color: #fff;
    margin-top: 10rpx;
  }
  
  .ikz-orderdetail {
    width: 100%;
    height: 100%;
  }
  
  .ikz-orderdetail-top {
    box-sizing: border-box;
    width: 95%;
    background: #fff;
    margin: 30rpx auto;
    border-radius: 15rpx;
  }
  
  .ikz-orderdetail-top-code {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
  }
  
  .ikz-orderdetail-top-num {
    box-sizing: border-box;
    padding-left: 20rpx;
    font-size: 28rpx;
    color: #888;
  }
  
  .ikz-orderdetail-top-status {
    box-sizing: border-box;
    padding: 20rpx 30rpx;
    background: linear-gradient(to right, #FDAF64, #FBAB7E);
    color: #fff;
    font-size: 28rpx;
    border-top-right-radius: 15rpx;
    border-bottom-left-radius: 15rpx;
  }
  
  .ikz-orderdetail-list-item {
    box-sizing: border-box;
    padding: 30rpx;
    border-radius: 15rpx;
  }
  
  .ikz-orderdetail-list-top {
    display: flex;
    align-items: center;
  }
  
  .ikz-orderdetail-list-img {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
  }
  
  .ikz-orderdetail-list-head-right {
    margin-left: 20rpx;
    width: 85%;
  }
  
  .ikz-orderdetail-list-head-right-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 50rpx;
  }
  
  .ikz-orderdetail-list-head-time {
    color: #888;
    font-size: 25rpx;
  }
  
  .ikz-orderdetail-list-head-card {
    background-color: #FDAF64;
    color: #fff;
    font-size: 23rpx;
    border-radius: 15rpx;
    padding: 0px 10rpx;
    text-align: center;
    line-height: 45rpx;
  
  }
  
  .ikz-orderdetail-list-head-price {
    color: #FDAF64;
  }
  
  .ikz-orderdetail-list-content {
    line-height: 45rpx;
    font-size: 30rpx;
    margin: 15rpx 0;
  }
  
  .ikz-orderdetail-list-head-name {
    font-size: 28rpx;
  }
  
  
  
  /* dibu*/
  .ikz-orderdetail-other {
    box-sizing: border-box;
    width: 95%;
    background: #fff;
    margin: 30rpx auto;
    border-radius: 15rpx;
  }
  
  .ikz-orderdetail-other-top {
    display: flex;
    align-items: center;
  }
  
  .ikz-orderdetail-other-title {
    box-sizing: border-box;
    padding: 20rpx;
    line-height: 60rpx;
  }
  
  .ikz-orderdetail-other-top-title {
    color: #888;
    font-size: 28rpx;
  }
  
  .ikz-orderdetail-other-content {
    margin-left: 65rpx;
  }
  .ikz-bottom{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20rpx;
  }
  .ikz-help-btn{
    position: relative;
    width: 80%;
    background: #FF6565;
    border-radius: 50rpx;
    color: #fff;
    text-align: center;
    line-height: 100rpx;
    margin-bottom: 15rpx;
  }
  .ikz-help-btn1{
    position: relative;
    width: 80%;
   background: #D54242;
    border-radius: 50rpx;
    color: #fff;
    text-align: center;
    line-height: 100rpx;
    margin-bottom: 20rpx;
  }
  .ikz-help-btn2{
    position: relative;
    width: 80%;
   background: #76A8FD;
    border-radius: 50rpx;
    color: #fff;
    text-align: center;
    line-height: 100rpx;
    margin-bottom: 20rpx;
  }
  /* ad */
  
  /* 快递 */
  .ikz-take {
    box-sizing: border-box;
    padding: 30rpx;
    width: 95%;
    margin: 30rpx auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 15rpx;
  }
  
  .ikz-take-img {
    width: 80rpx;
    height: 80rpx;
  }
  
  .ikz-take-title {
    font-size: 30rpx;
  }
  
  .ikz-take-center {
    width: 50%;
    line-height: 50rpx;
  }
  
  .ikz-take-tips {
    color: #888888;
    font-size: 28rpx;
  }
  
  .ikz-take-option {
    width: 50rpx;
    height: 50rpx;
  }
  
  .ikz-take-right {
    width: 25%;
    display: flex;
    align-items: center;
  }
  
  .ikz-take-num {
    width: 40%;
    text-align: center;
  }
  
  /* 快递 */
  
  
  .ikz-tips {
    box-sizing: border-box;
    padding: 10rpx 40rpx;
    width: 95%;
    background: #fff;
    margin: 10px auto;
    border-radius: 15rpx;
  }
  
  .ikz-tips-item {
    padding: 20rpx 0px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .ikz-tips-item:before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1rpx solid #d9d9d9;
    color: #d9d9d9;
    left: 0px;
  }
  
  .ikz-tips-item:first-child:before {
    display: none;
  }
  
  .ikz-tips-help-title {
    line-height: 60rpx;
  }
  
  .ikz-tips-help-content {
    line-height: 50rpx;
    color: #828282;
  }
  
  .ikz-tips-price {
    color: #828282;
  }
  .ikz-updata-img{
    width: 150rpx;
    height: 150rpx;
  }
  .ikz-updata-add{
    position: relative;
    margin-left: 10rpx;
  }
  .ikz-updata-img{
    width: 150rpx;
    height: 150rpx;
  }
  .ikz-updata-bottom{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20rpx;
  }
  
  .ikz-sticky-spot {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #76A8FD;
    margin-right: 20rpx;
  }
  
  .ikz-sticky-spot1 {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #FF8800;
    margin-right: 20rpx;
  }
  .ikz-sticky-spot2 {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #009423;
    margin-right: 20rpx;
  }
  /* 其他 */
  .ikz-receive-box{
   
    width: 95%;
    background: #fff;
    margin: 10px auto;
    border-radius: 15rpx;
    overflow: hidden;
  }
  .ikz-receive-box-top{
    box-sizing: border-box;
    padding: 30rpx 30rpx;
  }
  .ikz-receive-title{
    display: flex;
    align-items: center;
    
  }
  .ikz-receive-img{
    margin-right: 15rpx;
    width: 40rpx;
    height: 40rpx;
  }
  .ikz-receive-user{
    display: flex;
    align-items: center;
    margin-top: 40rpx;
  }
  .ikz-receive-user-img{
    margin-right: 20rpx;
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
  }
  .ikz-detail-phone{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #85B2FF;
    color: #fff;
    border-bottom-left-radius: 15rpx;
    border-bottom-right-radius: 15rpx;
    line-height: 80rpx;
  }
  .ikz-detail-phone-img{
    width: 30rpx;
    height: 30rpx;
    margin-right: 15rpx;
  }
</style>
